/**
 * 事件绑定
 */

import React, { Component } from 'react'

// 函数组件
const Fnc = function () {
  // JS交互
  // 事件处理函数
  let handlerClick = (ot, event) => {
    console.log(ot, event)
  }

  // 模版
  return (
    <div>
      <h2>函数组件事件绑定</h2>
      <button
        onClick={(e) => {
          handlerClick(111, e)
        }}>
        点我！
      </button>
    </div>
  )
}
// 类组件=》父组件
export default class Index extends Component {
  // JS交互
  handlerClick(e, ot) {
    console.log(222, e.target, ot)
  }

  forword(e) {
    console.log(e)
    e.preventDefault()
    // return false
  }

  handlerCl = (e) => {
    console.log(e, this)
  }

  // 模版
  render() {
    return (
      <div>
        <h1>类组件事件绑定</h1>
        <a href="https://github.com" onClick={this.forword}>
          跳转
        </a>
        <button
          onClick={(e) => {
            console.log(111, e)
            this.handlerClick(e, 12)
          }}>
          点我！
        </button>
        {/* <button onClick={this.handlerCl.bind(this)}> */}
        <button onClick={this.handlerCl}>事件处理函数this指向问题</button>
        <Fnc />
      </div>
    )
  }
}
